<template>
  <div class="echa">
    <v-chart @click="aa" :auto-resize="true" :options="polar" />
  </div>
</template>
<script lang="ts">
import echarts from "echarts";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { log } from 'three';

@Component({
  components: {},
})
export default class echa extends Vue {
  @Prop({ default: () => [] })
  xAxisData: Array<string> | undefined;
  @Prop({ default: () => [] })
  dataList: Array<any> | undefined;
  public polar: Object = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      left: "2%",
      right: "4%",
      bottom: "14%",
      top: "16%",
      containLabel: true,
    },
    legend: {
      right: "2%",
      top: "2%",
      textStyle: {
        color: "#fff",
      },
      itemWidth: 14,
      itemHeight: 12,
      // itemGap: 35
    },

    xAxis: {
      type: "category",
      data: ["变压器类", "电抗器类", "断路器类", "GIS类", "电容器设备类"],
      axisLine: {
        lineStyle: {
          color: "rgba(115,129,167,0.8)",
        },
      },
      axisLabel: {
        // interval: 0,
        // rotate: 40,
        color: "#fff",
        textStyle: {
          fontFamily: "Microsoft YaHei",
        },
      },
      axisTick: {
        show: false,
      },
    },

    yAxis: {
      type: "value",
      name: "单位：个",
      axisLine: {
        show: false,
        lineStyle: {
          color: "white",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.1)",
        },
      },
      axisLabel: {},
      axisTick: {
        show: false,
      },
    },
    dataZoom: [
      {
        show: true,
        height: 12,
        xAxisIndex: [0],
        bottom: "5%",
        start: 0,
        endValue: 3,
        handleIcon:
          "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
        handleSize: "110%",
        handleStyle: {
          color: "#d3dee5",
        },
        backgroundColor: "rgba(5,180,255,0.2)",
        fillerColor: "rgba(5,180,255,1)",
        textStyle: {
          color: "#fff",
        },
        borderColor: "rgba(5,180,255,0.1)",
      },
      {
        type: "inside",
        show: true,
        height: 15,

        start: 1,
        end: 35,
      },
    ],
    series: [
      {
        name: (this as any).xAxisData[0],
        type: "bar",
        barMinWidth: 15,
        barMaxWidth: 30,
        barGap: 0, //柱间距离
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#fff",
              },
            },
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#4B8FF9",
              },
              {
                offset: 1,
                color: "#114BA6",
              },
            ]),
            // barBorderRadius: 12,
          },
        },
        // label: {
        // 	normal: {
        // 		show: true,
        // 		fontSize: 14,
        // 		color: '#fff',
        // 		position: 'top',
        // 	}
        // },
        data: [400, 500, 500, 500, 500, 400],
      },
      {
        name: (this as any).xAxisData[1],
        type: "bar",
        barMinWidth: 15,
        barMaxWidth: 30,
        barGap: 0, //柱间距离
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#fff",
              },
            },
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#FF8E1C",
              },
              {
                offset: 1,
                color: "#8E4B07",
              },
            ]),
            // barBorderRadius: 11,
          },
        },
        data: [400, 500, 500, 500, 500, 400],
      },
      {
        name: (this as any).xAxisData[2],
        type: "bar",
        barMinWidth: 15,
        barMaxWidth: 30,
        barGap: 0, //柱间距离
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#fff",
              },
            },
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#38F7F2",
              },
              {
                offset: 1,
                color: "#264C9C",
              },
            ]),
            // barBorderRadius: 11,
          },
        },
        data: [400, 600, 700, 700, 200, 400],
      },
    ],
  };

  @Watch("dataList", { immediate: true, deep: true })
  getBarData(dataList: any) {
    var total: any[] = [];
    var early: any[] = [];
    var onLine: any[] = [];
    var xAxisData: any[] = [];
    console.log(dataList);
    var is=0
    dataList.map((v: any, i: number) => {
      console.log(v);
      
      if (v.name) {
        
        total[is] = v.total;
        early[is] = v.early;
        onLine[is] = v.onLine;
        xAxisData[is] = v.name;
        is++
      }
    });
    (this as any).polar.series[0].data = total;
    (this as any).polar.series[1].data = early;
    (this as any).polar.series[2].data = onLine;
    (this as any).polar.xAxis.data = xAxisData;
  }
  aa(val: any) {
    // console.log(val);
  }
  mounted() {
    // console.log(this.xAxisData);
  }
}
</script>
<style lang="scss" scoped>
.echa {
  width: 100%;
  height: 100%;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
